<template>
	<div>
		<div class="about">
			<div style="color: white;font-size: 22px;position: absolute;top: 115px;left: 67px;" @click="$router.push({path: '/'})" :class="filterBlur ? 'filterBlur' : ''">
				<van-icon name="arrow-left"></van-icon>
				<span style="position: absolute;width: 100px;top: -5px;left: 40px;">高新奇</span>
			</div>
			<div class="content" :class="filterBlur ? 'filterBlur' : ''">
				<div class="top">
					<div class="top_left">
						<div class="video-box">
							<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
						</div>
					</div>
					<div class="top_right">
						<div>
							<p class="f23 l-height23">高新奇科技园</p>
							<p class="f20 l-height45">深圳市高新奇科技股份有限公司</p>
							<p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;">
								深圳市高新奇科技股份有限公司成立于1997年，是集研发、制造、销售通讯终端产品于一体的大型专业企业，自有现代化的工业园区17万平方米，产品制造一体化，拥有电脑全自动贴片生产线及现代化综合生产线60余条，今已开发拥有GSM手机、CDMA手机、3G手机、无线商话、普通话机、Caller ID话机、固网短信话机、答录机话机、DECT数字 ······
							</p>
							<p><span class="more" @click="clickMore">查看更多</span></p>
						</div>
					</div>
				</div>
				<div class="btm">
					<p style="font-size: 22px;line-height: 60px;margin-top: 10px;">企业文化</p>
					<div class="btm_photo">
						<div>
							<dt>
							<dl><img src="../assets/about3.png"></dl>
							<dd>公司环境</dd>
						</dt>
						</div>
						<div>
							<dt>
							<dl><img src="../assets/about4.png"></dl>
							<dd>办公环境</dd>
						</dt>
						</div>
						<div>
							<dt>
							<dl><img src="../assets/about5.png"></dl>
							<dd>开心下午茶</dd>
						</dt>
						</div>
						<div>
							<dt>
							<dl><img src="../assets/about6.png"></dl>
							<dd>团队建设</dd>
						</dt>
						</div>
					</div>
				</div>
			</div>
			<div class="mark" v-show="isMore" :class="isfade ? 'a-fadein' : 'a-fadeout'"></div>
			<div class="dialog_remove a-fadein" v-show="isMore" @click="clickRemove" :class="isfade ? 'a-fadein' : 'a-fadeout'">
				<van-icon name="cross"></van-icon>
			</div>
			<div class="dialog" v-show="isMore" :class="isfade ? 'a-fadein' : 'a-fadeout'">
				<div class="dialog_content">
					<p>深圳市高新奇科技股份有限公司成立于1997年，是集研发、制造、销售通讯终端产品于一体的大型专业企业，自有现代化的工业园区17万平方米，产品制造一体化，拥有电脑全自动贴片生产线及现代化综合生产线60余条，今已开发拥有GSM手机、CDMA手机、3G手机、无线商话、普通话机、Caller ID话机、固网短信话机、答录机话机、DECT数字无绳话机、对讲机、传真机、笔记本电脑等10多个系列数百款知名品牌产品。公司成立来，产品畅销美国、俄罗斯、日本、埃及、中东、东南亚、拉美等全世界70多个国家和地区。
					</p>
					<p>深圳市高新奇科技股份有限公司成立于1997年，是集研发、制造、销售通讯终端产品于一体的大型专业企业，自有现代化的工业园区17万平方米，产品制造一体化，拥有电脑全自动贴片生产线及现代化综合生产线60余条，拥有员工5000余名。迄今已开发拥有GSM手机、CDMA手机、3G手机、无线商话、普通话机、Caller ID话机、固网短信话机、答录机话机、DECT数字无绳话机、对讲机、传真机、笔记本电脑等10多个系列数百款知名品牌产品。公司成立来，产品畅销美国、俄罗斯、日本、埃及、中东、东南亚、拉美等全世界70多个国家和地区，仅话机一项累计出口量达一亿部以上。旗下手机品牌爱我系列已经于2008年上市，得到了市场的广泛认可。 </p>
					<p>高新奇科技是广东省100强制造企业、深圳市50强民营企业和通信行业 10强企业。公司长期以来注重新产品的开发，从新功能的研发到新外形的设计，始终走在行业的前端，自主开发的产品目前已获国家专利技术100多项，先后荣获畅销品牌奖、出口产品创新奖、最具影响力企业等大量奖项。高新奇手机于2008年与国际巨星张学友签订代言协议，2009年与深圳航空结成战略合作伙伴，2010年在现有10万平米工业园区旁新建7万平米的新工业园，继续扩大产能，迈入新一轮的发展时期。 公司自1997年组建以来，坚持研发创新、产品创新、管理创新、服务创新，旗下迄今已开发拥有GSM手机和GSM/CDMA无线商话、普通话机、Caller ID话机、固网短信话机、答录机和答录话机、DECT数字无绳话机、对讲机、传真机等9大系列百余款知名品牌产品。公司产品以“功能先进、品种齐全、质优实用及独特的专利外观设计”赢得了海内外广大用户的青睐。自2000年以来，高新奇产品畅销美国、俄罗斯、法国、日本、伊朗、埃及、土耳其、巴基斯坦、印度、韩国、台湾等全世界60多个国家和地区，9年来仅话机一项累计出口量达五千万部以上。</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/Header'
	let _this;
	export default {
		name: 'Index',
		data() {
			return {
				isMore: false,
				filterBlur: false,
				isfade: '',
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					muted: false, // 默认情况下将会消除任何音频。
					loop: false, // 导致视频一结束就重新开始。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: "",
						src: require('../assets/about7.mp4') //视频url地址
					}],
					poster: require('../assets/about1.png'), // 你的封面地址
					notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: true,
						durationDisplay: true,
						remainingTimeDisplay: false,
						fullscreenToggle: true // 全屏按钮
					}
				}
			}
		},
		components: {
			Header
		},
		beforeCreate() { // 创建 vue 实例之前
			_this = this;
		},
		watch: {

		},
		mounted() {

		},
		methods: {
			clickMore() {
				this.isMore = true;
				this.filterBlur = true;
				this.isfade = true;
			},
			clickRemove() {
				this.isfade = false;
				setTimeout(() => {
					this.filterBlur = false;
				}, 500)
				setTimeout(() => {
					this.isMore = false;
				}, 1000)
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		position: absolute;
		top: 165px;
		left: 67px;
		.top {
			display: flex;
			.top_left {
				position: relative;
				flex: 1;
				/*float: left;*/
				margin-right: 35px;
				.left-bg {
					box-shadow: 5px 5px 20px;
				}
				.video {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					cursor: pointer;
				}
			}
			.top_right {
				/*float: right;*/
				flex: 2;
				color: #FFFFFF;
				font-size: 17px;
				line-height: 30px;
				position: relative;
				padding-right: 66px;
				.more {
					position: absolute;
					bottom: -10px;
					font-size: 13px;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 50px;
					border: 2px solid rgba(255, 255, 255, 0.8);
					padding: 0px 25px;
					line-height: 25px;
				}
			}
		}
		.btm {
			color: #FFFFFF;
			.btm_photo {
				div {
					float: left;
					margin-right: 42px;
					text-align: center;
					font-size: 20px;
					img {
						box-shadow: 5px 5px 20px rgba(0, 0, 0, 1);
						margin-bottom: 5px;
					}
				}
			}
		}
	}
	
	.mark {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9;
		position: absolute;
	}
	
	.dialog {
		position: absolute;
		width: 80%;
		height: 61.5vh;
		z-index: 10;
		background: #2d3a4f;
		top: 20%;
		left: 10%;
		transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px));
		border-radius: 20px;
		font-size: 18px;
		color: #FFFFFF;
		overflow-x: auto;
		padding: 25px 10px;
		text-indent: 2rem;
		letter-spacing: 2px;
		line-height: 30px;
		.dialog_content {
			height: 100%;
			overflow: hidden;
			overflow-y: auto;
			padding: 0px 30px;
		}
	}
	
	.dialog_remove {
		position: absolute;
		right: 8%;
		top: 17%;
		font-size: 18px;
		color: #000000;
		background: #a3a7ab;
		width: 26px;
		height: 26px;
		text-align: center;
		justify-content: center;
		padding-top: 2px;
		border-radius: 50%;
		z-index: 10;
	}
	
	.filterBlur {
		filter: blur(5px);
	}
	
	.mt10 {
		margin-top: 10px;
	}
	
	.l-height45 {
		line-height: 45px;
	}
	
	.l-height23 {
		line-height: 23px;
	}
	
	.bold {
		font-weight: bold;
	}
	
	.f23 {
		font-size: 23px;
	}
	
	.f20 {
		font-size: 20px;
	}

	/deep/ .vjs-big-play-button {
		top: 80px;
    	left: 155px;
		height: 3em;
		width: 3em;
		font-size: 2em;
		line-height: 3em;
		border-radius: 3em;
	}
	
	/deep/ .vjs-poster {
		background-color: #2f5e8c;
	}
</style>